<template>
  <div class="loginBg">
    <div class="loginBox">
      <div class="left">
        <h2>网游棋牌</h2>
        <p>
          网游棋牌后台充值系统,
          <br />努力做到通山最好的特色棋牌游戏,
          <br />
        </p>
        <span>v 1.1.0</span>
      </div>
      <div class="right">
        <h2>欢迎登录</h2>
        <div class="login">
          <el-form :model="manager" :rules="rules" ref="user" label-width="100px">
            <el-form-item prop="tel">
              <el-input v-model="manager.tel" placeholder="请输入用户名" class="myInput">
                <i slot="prefix" class="el-input__icon el-icon el-iconyonghu2"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="manager.password"
                placeholder="请输入密码"
                class="myInput"
              >
                <i slot="prefix" class="el-input__icon el-icon el-icondenglumima"></i>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="btn" @click="submitForm('user')">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api";
import { showTips } from "@/utils";
import { mapMutations } from "vuex";
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      manager: {
        tel: "",
        password: ""
      },
      rules: {
        tel: {validator: checkPhone, trigger: 'blur'},
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    ...mapMutations(["setToken", "setUserInfo"]),
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          login(this.manager).then(res => {
            if (res.code == 200) {
              this.setToken(res.token);
              this.setUserInfo(res.user);
              showTips("success", "登录成功");
              this.$router.push({ name: "index" });
            } else {
              this.$message.error("用户名和密码不匹配,請重新輸入");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
@keyframes animate-cloud {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -1000px;
  }
}
.loginBg {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/images/cloud.jpg") 0 bottom repeat-x #049ec4;
  animation: animate-cloud 20s linear infinite;
}
.loginBox {
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 500px;
  background-color: #fff;
  box-shadow: -4px 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  .left {
    flex: 1;
    height: 500px;
    background-color: #409eff;
    color: #fff;
    text-align: center;
    h2 {
      font-size: 60px;
      margin-top: 80px;
      font-family: "微软雅黑";
    }
    p {
      font-size: 20px;
      margin-top: 40px;
      line-height: 35px;
    }
    span {
      padding-top: 20px;
      display: block;
    }
  }
  .right {
    flex: 1;
    height: 500px;
    h2 {
      text-align: center;
      margin-top: 60px;
      font-size: 25px;
      color: #333;
      letter-spacing: 3px;
    }
    .login {
      padding-top: 30px;
      width: 300px;
      margin: 0 auto;
      /deep/.el-form-item__content {
        margin-left: 0 !important;
      }
      .myInput {
        margin-bottom: 20px;
        border-bottom: 1px solid #67c23a;
        /deep/.el-input__inner {
          border: none;
        }
      }
      .btn {
        width: 300px;
        border: 1px solid #409eff;
        color: #409eff;
        margin-top: 20px;
        &:hover {
          background-color: #66b1ff;
          color: #fff;
        }
      }
    }
  }
}
</style>

